
<template>
  <div>
    <baidu-map class="map"
        :center="{lng:114.065537,lat:22.553321}"
        :zoom='13'
        :scroll-wheel-zoom='true'
    >
    <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
    <bm-marker :position="{lng:114.065537,lat:22.553321}" :dragging="true" animation='BMAP_ANIMATION_BOUNCE'>
        <bm-label content='深圳市市民之家' :labelStyle="{color:'red',fontSize:'12px'}" :offset="{width:-35,height:30}" />  
    </bm-marker>
  </baidu-map>
  </div>
</template>


<script>
import Vue from "vue";
import BaiduMap from 'vue-baidu-map'
import DisTopBar from "../../component/DisTopBar";
import BottomBar from "../../component/BottomBar";

Vue.use(BaiduMap, {
  ak: 'eXSFEGe5fK4nMGf3N0DIRBTVWlfCqoKB'    //这个地方是官方提供的ak密钥
})
export default {
  name: "Near",
  data() {
    return {};
  },
  components: {
    DisTopBar,
    BottomBar,
  },


};
</script>

<style lang='stylus' scoped>
   
.map 
  width: 100%;
  height: 4.8rem;
  
</style>